<template>
  <div style="width: 100%">
    <span v-if="props.showText">{{formData[prop] || ''}}</span>
    <el-input
      v-else
      v-model="formData[prop]"
      clearable
      :placeholder="calcPlaceholder"
      :disabled="disabled"
      @change="handleChange"
      @blur="handleBlur"
      @keyup.self="handleKeyup"
    >
      <template #prepend v-if="prefixText">
        <span>{{prefixText}}</span>
      </template>
      <template #append v-if="suffixText">
        <span>{{suffixText}}</span>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import {computed, inject, ref, watch} from 'vue';
import { useDisabled } from "element-plus";

const emit = defineEmits(['change', 'blur']);
const props = defineProps({
  prop: {
    type: String,
    default: ''
  },
  options: Object,
  showText: Boolean,
  prefixText: String,
  suffixText: String,
  placeholder: String,
  valuePlaceholder: String,
  disabled: Boolean,
});
const formData = inject('formData');
const inputDisabled = useDisabled();
const disabled = ref(false);

const init = () => {
  disabled.value = inputDisabled.value || props.disabled || false;
};

const handleChange = () => {
  emit('change');
};

const handleBlur = () => {
  emit('blur');
};

const handleKeyup = (event) => {
  event.preventDefault();
  if (event.key === 'Enter') {
    handleChange();
  }
};

const calcPlaceholder = computed(() => {
  return disabled.value === true ? (props.valuePlaceholder || '') : props.placeholder;
});

watch(() => props, () => {
  init();
}, {immediate: true, deep: 1});
</script>